<template>
  <el-card class="box-card">
    <MainGoBack name="供应商列表">
      <template v-slot:right>
        <el-button size="mini" @click="setType" v-if="deatilType === 2">设置状态</el-button>
      </template>
    </MainGoBack>
    <div class="supplier-detail">
      <div class="supplier-detail-item" v-for="item in infoList" :key="item.title">
        <p class="sdi-title">
          <span></span>
          <em>{{ item.title }}</em>
        </p>
        <el-row>
          <el-col v-for="(childItem, index) in item.list" :key="index" :span="childItem.span">
            <span>{{ childItem.label }}：</span>
            <span v-if="!childItem.imageList">{{ detailInfo[childItem.key] || '' }}</span>
            <span v-if="!childItem.imageList && childItem.key2">-{{ detailInfo[childItem.key2] || '' }}</span>
            <template v-if="childItem.imageList && childItem.imageList.length">
              <el-image fit="fill" v-for="image in childItem.imageList" :src="detailInfo[image]" :key="image" :preview-src-list="[detailInfo[image]]"></el-image>
            </template>
          </el-col>
        </el-row>
      </div>
      <div class="mg-b-50">
        <el-button class="reset" type="primary" @click="toExamine">审核通过</el-button>
        <el-button class="add-btn" @click="cancel">取消</el-button>
      </div>
    </div>
    <MainDialog
      title="审核供应商"
      :showDialog="examineVisible"
      width="480px"
      @close="handleClose">
      <template v-slot:content>
        <el-form :model="examineForm" :rules="rules" label-position="right" label-width="100px" ref="examineFormRef">
          <el-form-item label="供应商名称：" prop="company_name">
            <el-input v-model="examineForm.company_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="审核意见：" prop="audit_remark">
            <el-input placeholder="输入内容" v-model="examineForm.audit_remark" type="textarea" maxlength="300" show-word-limit></el-input>
          </el-form-item>
          <div class="flex">
            <div>
              <span>审核人：</span>
              <span>{{ examineForm.name }}</span>
            </div>
            <div>
              <span>审核日期：</span>
              <span>{{ examineForm.time }}</span>
            </div>
          </div>
        </el-form>
      </template>
      <template v-slot:footer>
        <div class="main-dialog-btn align-right">
          <el-button type="success" class="add-btn" @click="submitExamine(2)">驳回</el-button>
          <el-button type="primary" class="submit" @click="submitExamine(1)">通过</el-button>
        </div>
      </template>
    </MainDialog>
    <MainDialog
      title="设置状态"
      :showDialog="typeVisible"
      width="480px"
      @close="handleTypeClose">
      <template v-slot:content>
        <el-form :model="typeForm" :rules="typeRules" label-position="right" label-width="100px">
          <el-form-item label="选择状态：" prop="activeType">
            <div class="flex-center">
              <div v-for="item in typeList" :key="item.label" :class="{ active: typeForm.activeType === item.value }" @click="changeType(item)">
                {{ item.label }}
              </div>
            </div>
          </el-form-item>
          <el-form-item label="备注内容：" prop="info">
            <el-input placeholder="输入内容" v-model="typeForm.info" type="textarea" maxlength="300" show-word-limit></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template v-slot:footer>
        <div class="main-dialog-btn align-right">
          <el-button type="success" class="add-btn" @click="handleTypeClose">取消</el-button>
          <el-button type="primary" class="submit" @click="handleTypeClose">保存</el-button>
        </div>
      </template>
    </MainDialog>
  </el-card>
</template>
  
<script>
import { $http, $post } from "@/api/index";
import { mapGetters } from "vuex";
import { detailData } from '../MockData';
import dayjs from "dayjs";
const { infoList } = detailData
export default {
  name: 'SupplierDetail',
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      detailId: null,
      deatilType: null,  //  1：查看，2审核
      infoList,
      detailInfo: {},  //  审核详情
      examineVisible: false,
      examineForm: {
        company_name: '',
        audit_remark: '',
        time: '',
        name: ''
      },
      rules: {
        audit_remark: [
          { required: true, message: '请输入审核意见', trigger: 'blur' },
        ]
      },
      typeVisible: false,
      typeList: [
        { label: '启用', value: '0' },
        { label: '禁用', value: '1' },
        { label: '黑名单', value: '2' },
      ],
      typeForm: {
        activeType: '0',
        info: ''
      },
      typeRules: {
        activeType: [
          { required: true, message: '请选择状态', trigger: 'change' },
        ],
        info: [
          { required: true, message: '请输入备注内容', trigger: 'blur' },
        ]
      },
    }
  },
  activated() {
    this.detailId = this.$route.query.id
    this.deatilType = +this.$route.query.type
    this.getData()
  },
  mounted() {
  },
  methods: {
    getData() {
      $http('/Supplier/supplier-join-details', { id: this.detailId }).then(res => {
        if(res.errcode == 0) {
          this.detailInfo = res.data[0].info
        }
      })
    },
    handleClose() {
      this.examineVisible = false
      this.examineForm.audit_remark = ''
    },
    //  审核
    toExamine() {
      this.examineForm.company_name = this.detailInfo.company_name
      this.examineForm.name = this.userInfo.name
      this.examineForm.time = dayjs(new Date()).format("YYYY-MM-DD")
      this.examineVisible = true
    },
    //  取消
    cancel() {
      this.$router.back(-1)
    },
    setType() {
      this.typeVisible = true
    },
    handleTypeClose() {
      this.typeVisible = false
    },
    changeType(item) {
      this.typeForm.activeType = item.value
    },
    submitExamine(audit_status) {
      this.$refs.examineFormRef.validate((valied) => {
        if(valied) {
          $post('/Supplier/supplier-join-audit', { id: this.detailId, audit_status, audit_remark: this.examineForm.audit_remark }, 'post').then(res => {
            if(res.errcode == 0 ) {
              this.$message.success(res.errmsg)
              this.handleClose()
            }else {
              this.$message.error(res.errmsg)
              this.handleClose()
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../index.scss';
@import './detail.scss';
</style>